<template>
    <div>
      <el-form :inline="true" :model="patient" class="demo-form-inline">
        <el-input style="width: 300px" prefix-icon="el-icon-search" placeholder="请输入就诊卡号" v-model="mid"></el-input>
        <el-form-item>
          <el-button type="primary" @click="getMessageByMid">查询</el-button>
        </el-form-item>
       <el-form-item>
          <el-button type="primary" @click="showOutpatientView">就诊</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="showTestView">开化验单</el-button>
        </el-form-item>
        <el-form-item>
        <el-button type="primary" @click="showTestResultView">化验结果</el-button>
        </el-form-item>

        <br>
<!--        <el-form-item label="姓名">
          <el-input v-model="patient.medicalCard.name" disabled></el-input>
        </el-form-item>
        <el-form-item label="手机号码">
          <el-input v-model="patient.medicalCard.telephone" disabled></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-input v-model="patient.medicalCard.sex" disabled></el-input>
        </el-form-item>
        <el-form-item label="身份证">
          <el-input v-model="patient.medicalCard.idCard" disabled></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="patient.medicalCard.email" disabled></el-input>
        </el-form-item><br>
        <el-form-item label="年龄">
          <el-input v-model="patient.age" disabled></el-input>
        </el-form-item>
        <el-form-item label="出生日期">
          <el-input v-model="patient.birthday" disabled></el-input>
        </el-form-item>
        <el-form-item label="民族">
          <el-input v-model="patient.nation.name" disabled></el-input>
        </el-form-item>
        <el-form-item label="政治面貌">
          <el-input v-model="patient.politicsStatus.name" disabled></el-input>
        </el-form-item>

        <el-form-item label="婚姻状况">
          <el-input v-model="patient.marriedStatus" disabled></el-input>
        </el-form-item>
        <el-form-item label="籍贯省份">
          <el-input v-model="patient.province" disabled></el-input>
        </el-form-item>
        <el-form-item label="籍贯城市">
          <el-input v-model="patient.city" disabled></el-input>
        </el-form-item>
        <el-form-item label="家族史">
          <el-input v-model="patient.familyHistory" disabled></el-input>
        </el-form-item>
        <el-form-item label="过去史">
          <el-input v-model="patient.pastHistory" disabled></el-input>
        </el-form-item>
        <el-form-item label="个人史">
          <el-input v-model="patient.personalHistory" disabled></el-input>
        </el-form-item>-->
      </el-form>

      <el-descriptions class="margin-top" title="门诊患者信息列表" :column="5" :size="size" border>
        <template slot="extra">
          <el-popover
              placement="top-start"
              title="就诊流程"
              width="200"
              trigger="hover"
              content="获取就诊信息->主诉->开化验单->诊断结果，医嘱->开处方药->完成就诊">
            <el-button slot="reference">注意事项</el-button>
          </el-popover>
        </template>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            姓名
          </template>
          {{ patient.medicalCard.name }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-tickets"></i>
            性别
          </template>
          {{patient.medicalCard.sex}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-tickets"></i>
            身份证
          </template>
          {{patient.medicalCard.idCard}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-mobile-phone"></i>
            手机号
          </template>
          {{ patient.medicalCard.telephone }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-tickets"></i>
            邮箱
          </template>
          {{patient.medicalCard.email}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-location-outline"></i>
            居住地
          </template>
          {{ patient.city }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-tickets"></i>
            备注
          </template>
          <el-tag size="small">患者</el-tag>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-office-building"></i>
            联系地址
          </template>
          {{ patient.province}}{{patient.city}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-tickets"></i>
            婚姻状况
          </template>
          {{patient.marriedStatus}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-tickets"></i>
            家族史
          </template>
          {{patient.familyHistory}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-tickets"></i>
            过去史
          </template>
          {{patient.pastHistory}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-tickets"></i>
            个人史
          </template>
          {{patient.personalHistory}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-tickets"></i>
            政治面貌
          </template>
          {{patient.politicsStatus.name}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-tickets"></i>
            民族
          </template>
          {{patient.nation.name}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-tickets"></i>
            出生日期
          </template>
          {{patient.birthday}}
        </el-descriptions-item>
      </el-descriptions>
      <br>
<!--      主诉<el-input
          type="textarea"
          :rows="2"
          placeholder="请输入内容"
          v-model="textarea">
      </el-input>-->
      <el-dialog title="就诊" :visible.sync="dialogFormVisible">
        <el-form :model="outpatient">
          <el-form-item label="主诉" :label-width="formLabelWidth">
            <el-input v-model="outpatient.chiefComplaint" autocomplete="off" type="textarea"></el-input>
          </el-form-item>
          <el-form-item label="诊断结果" :label-width="formLabelWidth">
            <el-input v-model="outpatient.diagnosis" autocomplete="off" type="textarea"></el-input>
          </el-form-item>
          <el-form-item label="医嘱" :label-width="formLabelWidth">
            <el-input v-model="outpatient.advice" autocomplete="off" type="textarea"></el-input>
          </el-form-item>
          <el-tag>就诊状态</el-tag>
          <el-switch
              v-model="outpatient.enabled"
              active-color="#13ce66"
              inactive-color="#ff4949"
              active-text="已完成"
              inactive-text="未完成"
          />

        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="updateOutpatients">确 定</el-button>
        </div>
      </el-dialog>

      <el-dialog title="化验" :visible.sync="dialogFormVisible2">
        <el-form :model="test">
          <el-form-item label="化验项目" :label-width="formLabelWidth">
            <el-select v-model="test.id" placeholder="请选择" value-key="id" change="changeValue">
              <el-option
                  v-for="item in allTests"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible2 = false">取 消</el-button>
          <el-button type="primary" @click="addTest">确 定</el-button>
        </div>
      </el-dialog>

      <el-dialog title="化验结果" :visible.sync="dialogFormVisible3">
        <el-form :model="patientTest">
          <el-form-item label="化验项目" :label-width="formLabelWidth">
            <el-input v-model="test2.name" autocomplete="off" ></el-input>
          </el-form-item>
          <el-form-item label="正常值" :label-width="formLabelWidth" >
            <el-input v-model="test2.normal" autocomplete="off" type="textarea"></el-input>
          </el-form-item>
          <el-form-item label="化验结果" :label-width="formLabelWidth">
            <el-input v-model="patientTest.result" autocomplete="off" type="textarea"></el-input>
          </el-form-item>

          <div class="demo-image__lazy">
            <el-image v-for="url in testImage" :key="url" :src="url" lazy></el-image>
          </div>

        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible3 = false">取 消</el-button>
          <el-button type="primary" @click="dialogFormVisible3 = false">确 定</el-button>
        </div>
      </el-dialog>

      <div style="display: -webkit-flex;display: flex;">
        <el-card class="box-card">
          <div id="box">
            <div >
              <h4 style="font-family: STLiti,serif;color: #2C9FAF">SHOSPITAL</h4>
              <div style="text-align: center"><h2 >门诊处方笺</h2></div>
            </div>
            <el-descriptions title="患者信息">
              <el-descriptions-item label="处方号">{{this.outpatient.preId}}</el-descriptions-item>
              <el-descriptions-item label="科室">{{ this.department.name }}</el-descriptions-item>
              <el-descriptions-item label="日期">{{ this.nowDate }}</el-descriptions-item>
              <el-descriptions-item label="姓名">{{ patient.medicalCard.name }}</el-descriptions-item>
              <el-descriptions-item label="性别">{{ patient.medicalCard.sex }}</el-descriptions-item>
              <el-descriptions-item label="民族">{{ patient.nation.name }}</el-descriptions-item>
              <el-descriptions-item label="年龄">{{ patient.age }}</el-descriptions-item>
              <el-descriptions-item label="初步诊断">{{ outpatient.diagnosis }}</el-descriptions-item>
            </el-descriptions>

            <div style="display: flex">
              <div style="font-size: 1.1rem">
                <img style="width: 70px;height: 70px"
                     :src="require('@/assets/prescription.png')">
              </div>
            </div>

            <div style="margin: 20px 0 0 185px" >
              <ul>
                <li v-for="site in drugs">
                  {{ site }}
                </li>
              </ul>
            </div>
          </div>
        </el-card>

        <div style="margin-left: 10px">
          <div v-print="'#box'" style="color: cornflowerblue;font-size: larger">打印</div>
          <h3 style="margin-left: 120px">处方药</h3>
          <el-form :model="drug" >
            <div style="display: flex">
              <el-form-item label="药品" :label-width="formLabelWidth" >
                <el-select v-model="drug.id" placeholder="请选择" value-key="id" @change="changeValue1" filterable>
                  <el-option
                      v-for="item in allDrugs"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="功效" :label-width="formLabelWidth">
                <el-select v-model="drug2.efficacy" placeholder="请选择" value-key="efficacy" @change="changeEfficacy" filterable>
                  <el-option
                      v-for="item in efficacy"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="类型" :label-width="formLabelWidth">
                <el-select v-model="drug2.type" placeholder="请选择" value-key="type"  @change="changeType" filterable>
                  <el-option
                      v-for="item in type"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </div>
            <el-form-item label="规格" :label-width="formLabelWidth">
              {{v3}}
            </el-form-item>
            <el-form-item label="服用方式" :label-width="formLabelWidth">
              <el-select v-model="v1" placeholder="请选择" value-key="id" @change="changeValue2">
                <el-option
                    v-for="item in value1"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="频率" :label-width="formLabelWidth">
              <el-select v-model="v2" placeholder="请选择" value-key="id" @change="changeValue3">
                <el-option
                    v-for="item in value2"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="数量" :label-width="formLabelWidth">
              <el-input v-model="drug.num" autocomplete="off" @input="changeValue4"></el-input>
            </el-form-item>
            <el-form-item style="margin-left: 120px">
              <el-button type="primary" @click="toAddDrug">添加</el-button>
            </el-form-item>

          </el-form>

        </div>
      </div>
    </div>


</template>

<script>
export default {
  name: "Outpatients",
  data(){
    return{
      mid:'',
      patient: {
        id:'',
        age:'',
        birthday:'',
        marriedStatus:'',
        province:'',
        familyHistory:'',
        pastHistory:'',
        personalHistory:'',
        medicalCard:'',
        nation:'',
        politicsStatus:''
      },
      medicalCard:{
        name:'',
        sex:'',
        telephone:'',
        idCard:'',
        email:''
      },
      nation:{
        name:''
      },
      politicsStatus:{
        name:''
      },
      outpatient: {
        id:'',
        mid:'',
        diagnosis:'',
        chiefComplaint:'',
        advice:'',
        uid:'',
        preId:'',
        tid:'',
        rid:'',
        enabled:''
      },
      textarea:'',
      size:'',
      dialogFormVisible:false,
      dialogFormVisible2:false,
      formLabelWidth:'120px',
      drug: {
        id:'',
        name:'',
        specification:'',
        unit:'',
        num:'',
        price:''
      },
      allDrugs:[{
        id:'',
        name:'',
        specification:'',
        unit:''
      }],
      drugs:[],
      value1:[
        {
          label:'口服',
          value:'口服'
        },
        {
          label: '外服',
          value: '外服'
        }
      ],
      value2:[
        {
          label:'一日1次',
          value:'一日1次'
        },
        {
          label:'一日2次',
          value:'一日2次'
        },
        {
          label:'一日3次',
          value:'一日3次'
        }
      ],
      v1:'',
      v2:'',
      v3:'',
      v4:'',
      addDrug:{
        preId:'',
        drugId:'',
        num:''
      },
      drug2:{
        efficacy:'',
        type:''
      },
      efficacy:[
          {
            label:'风热感冒',
            value:'风热感冒'
          },
          {
            label:'降火',
            value:'降火'
          }
          ],
      type:[
        {
          label:'颗粒',
          value:'颗粒'
        },
        {
          label:'片剂',
          value:'片剂'
        }],
      nowDate:'',
      allTests:[],
      test:{
        id:'',
        name:''
      },
      patientTest:[
        {
          id:'',
          nameId:'',
          result:'',
          createTime:'',
          testTime:'',
          payStatus:'',
          status:'',
          backStatus:'',
          test2:'',
          imageList:''
        }
      ],
      test2:{
        id:'',
        name:'',
        description:'',
        normal:'',
        attention:'',
        price:''
      },
      imageList:[],
      dialogFormVisible3:false,
      testImage:[],
      department:''




   }
  },
  mounted() {
    this.initAllDrugs();
    this.initDepartment();
  },
  methods:{
    //获取患者信息
    getMessageByMid(){

      this.getRequest("/outpatients/getMessageByMid/"+this.mid).then(resp=>{
        if(resp){
          const date=new Date();
          this.nowDate=date.getFullYear()+'年'+(date.getMonth()+1)+'月'+date.getDate()+'日';
          console.log(resp.obj);
          this.patient=resp.obj;
          this.initTest();
          this.initOutpatientsByMid();


        }
      })
    },
    //显示就诊框
    showOutpatientView(){
      this.initOutpatientsByMid();
      this.dialogFormVisible=true;
    },
    //根据卡号获取就诊信息
    initOutpatientsByMid(){
      this.getRequest("/outpatients/getOutPatientByMid/"+this.mid).then(resp=>{
        if(resp){
          this.outpatient=resp.obj;
        }
      })
    },
    //更新就诊记录
    updateOutpatients(){
      this.putRequest("/outpatients/updateOutpatients",this.outpatient).then(resp=>{
        if(resp){
          this.dialogFormVisible=false;
        }
      })
    },

    //获取药品框
    initAllDrugs(){
      this.allDrugs='';
      this.putRequest("/outpatients/getDrugsByType",this.drug2).then(resp=>{
        if(resp){
          this.allDrugs=resp;
        }
      })
    },
    //选择框改变时触发事件
    changeValue1(index){
      this.drug=this.allDrugs[index-1];
      console.log(this.drug);
      this.v3=this.drug.specification+'*'+this.drug.unit+'*'+this.drug.price+'元';
    },
    changeValue2(index){
      this.v1=index;
    },
    changeValue3(index){
      this.v2=index;
    },
    changeValue4(value){
      this.v4=value+this.drug.unit;
    },
    changeEfficacy(index){
      this.drug.id='';
      this.initAllDrugs();
    },
    changeType(index){
      this.drug.id='';
      this.initAllDrugs();
    },
    //添加处方药品
    toAddDrug(){
      this.drugs.push(this.drug.name+'/'+this.v3+'/'+this.v1+'/'+this.v2+'/'+this.v4);
      this.addDrug.preId=this.outpatient.preId;
      this.addDrug.drugId=this.drug.id;
      this.addDrug.num=this.drug.num;
      this.postRequest("/outpatients/addDrug",this.addDrug).then(resp=>{
        if(resp){
          this.drug='';
          this.v1='';
          this.v2='';
          this.v3='';
          this.v4='';

        }else{
          this.drugs=[];
          this.drug='';
          this.v1='';
          this.v2='';
          this.v3='';
          this.v4='';
        }
      })
    },
    //展示化验框
    showTestView(){
      this.dialogFormVisible2=true;
    },
    //获取化验项目放到下拉框
    initTest(){
      this.getRequest("/outpatients/getTests").then(resp=>{
        if(resp){
          this.allTests=resp;
        }
      })
    },
    //开化验单
    addTest(){
      this.getRequest('/outpatients/addTest?id='+this.test.id+'&&oid='+this.outpatient.id).then(resp=>{
        if(resp){
          this.dialogFormVisible2=false;

        }
      })
    },
    //展示化验结果框
    showTestResultView(){
      this.dialogFormVisible3=true;
      this.getRequest("/outpatients/getTestMes?id="+this.outpatient.tid).then(resp=>{
        if(resp){
          this.patientTest=resp.obj;
          console.log(this.patientTest)
          this.test2=this.patientTest.test;
          this.initTestImage();
        }
      })
    },
    //获取化验图片
    initTestImage(){
      this.getRequest("/outpatients/getTestImage?tid="+this.patientTest.id).then(resp=>{
        if(resp){
          this.testImage=resp;
        }
      })
    },
    //获取医生科室
    initDepartment() {
      this.getRequest("/outpatients/getDepByUid?uid="+this.$store.state.currentUser.id).then(resp=>{
        if(resp){
          this.department=resp;
        }
      })
    }

  }
}
</script>

<style scoped>
.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
}

.box-card {
  width: 800px;
  height: 800px;
}

</style>